<script setup>
import { getGoodsid, buygoodService } from '/src/api/layout.js'
import { addshopcart } from '/src/api/shopcart.js'
import { useUserStore } from '@/stores'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
const doi = ref()
const userStore = useUserStore()
const route = useRoute()
const data = ref([])
const addcart = async () => {
  const res = await addshopcart(route.params.id)
  if (res.code == 1) {
    ElMessage.success(res.data)
  } else {
    ElMessage.error(res.data)
  }
  // await userStore.getUser()
  // location.reload()
}
const {
  user: { balance }
} = useUserStore()
const getidgood = async () => {
  const getgoodsid = route.params.id
  const response = await getGoodsid(getgoodsid)
  data.value = response.data
  if (data.value.status == 2) {
    doi.value = '已被购买'
  } else {
    doi.value = '正常'
  }
}
getidgood()
const buyGoods = async () => {
  await ElMessageBox.confirm(`你确认购买？您的余额:${balance}`, '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  const res = await buygoodService(data.value.id)
  console.log(res)
  if (res.code == 1) {
    ElMessage.success(res.data)
  } else {
    ElMessage.error(res.data)
  }
  await userStore.getUser()
  getidgood()
}
</script>
<template>
  <div class="main">
    <div class="container">
      <!-- 商品表头 -->
      <div class="good-head">
        <p>商品名字</p>
        <p>用户评价</p>
      </div>
      <!-- 商品信息 -->
      <div class="goods-info">
        <div class="media">
          <!-- 图片预览区 -->
          <img v-if="data.image" :src="data.image" alt="" />
          <img v-else src="@/assets/empty.png" alt="" />
          <!-- 统计数量 -->
          <ul class="goods-sales">
            <li>
              <p>商品ID</p>
              <p>{{ data.id }}</p>
              <p><i class="iconfont icon-task-filling"></i>商品ID</p>
            </li>
            <li>
              <p>商品分类</p>
              <p>{{ data.categoryName }}</p>
              <p><i class="iconfont icon-comment-filling"></i>商品分类</p>
            </li>
            <li>
              <p>商品卖家</p>
              <p>{{ data.sellerName }}</p>
              <p><i class="iconfont icon-favorite-filling"></i>商品卖家</p>
            </li>
            <li>
              <p>商品状态</p>
              <p>{{ doi }}</p>
              <p><i class="iconfont icon-dynamic-filling"></i>商品状态</p>
            </li>
          </ul>
        </div>

        <div class="spec">
          <!-- 商品信息区 -->
          <p class="g-name"><strong>商品名称:</strong>{{ data.name }}</p>
          <p class="g-desc">商品状态:{{ doi }}</p>
          <p class="g-price">
            <span>{{ data.price }}</span>
          </p>
          <div class="g-service">
            <dl>
              <dt>卖家</dt>
              <dd>
                <el-avatar :size="60" :src="data.userImage" />
                {{ data.sellerName }}
              </dd>
            </dl>
            <dl>
              <dt>服务</dt>
              <dd>
                <span>良好服务</span>
                <span>快速送达</span>
                <span>免费包邮</span>
                <span class="phone">电话:{{ data.sellerPhone }}</span>
              </dd>
            </dl>
            <dl>
              <dt>商品简介</dt>
              <dd class="jianjie">{{ data.description }}</dd>
            </dl>
          </div>
          <div>
            <el-button size="large" class="btn" type="primary" @click="addcart">
              加入购物车
            </el-button>
            <el-button
              size="large"
              class="btn"
              type="primary"
              @click="buyGoods"
            >
              立即购买
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-content: center;
  color: #2c3e50;
  height: 100%;
  border-top: 1px solid #2c3e5055;
}
.container {
  max-width: 1200px;
  width: 100%;
  .good-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 35px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  .goods-info {
    padding-top: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    .media {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1;

      img {
        object-fit: cover;
        padding: 5px;
        background-color: antiquewhite;
        border-radius: 10%;
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease;

        &:hover {
          transform: scale(1.02);
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }
      }

      .goods-sales {
        display: flex;

        li {
          list-style: none;
          margin: 10px;
          padding: 10px;
          transition: all 0.3s ease;
          cursor: pointer;

          &:hover {
            transform: translateY(-3px);
            background-color: #f8f9fa;
            border-radius: 8px;
          }

          i {
            transition: transform 0.3s ease;
          }

          &:hover i {
            transform: scale(1.2);
          }

          p:first-child {
            color: #606266;
            font-size: 0.9em;
            font-weight: 500;
          }

          p:nth-child(2) {
            color: #303133;
            font-size: 1.1em;
            font-weight: 600;
            margin: 8px 0;
          }

          p:last-child {
            color: #909399;
            font-size: 0.85em;

            i {
              color: #409eff;
              margin-right: 4px;
            }
          }
        }
      }
    }

    .spec {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1;

      .g-name {
        transition: color 0.3s ease;

        &:hover {
          color: #409eff;
        }

        font-size: 1.5em;
        color: #303133;
        margin-bottom: 15px;

        strong {
          color: #606266;
          font-weight: 500;
          margin-right: 8px;
        }
      }

      .g-desc {
        color: #67c23a;
        font-size: 1em;
        margin: 10px 0;
      }

      .g-price {
        span {
          color: #f56c6c;
          font-size: 1.8em;
          font-weight: 600;

          &::before {
            content: '¥';
            font-size: 0.8em;
            margin-right: 2px;
          }
        }
      }

      .g-service {
        cursor: pointer;

        dl {
          margin: 15px 0;

          dt {
            color: #606266;
            font-weight: 500;
            margin-bottom: 8px;
          }

          dd {
            color: #303133;
            line-height: 1.6;

            span {
              background-color: #f0f9eb;
              color: #67c23a;
              padding: 2px 8px;
              border-radius: 4px;
              margin-right: 8px;
              font-size: 0.9em;
            }

            .phone {
              background-color: #f4f4f5;
              color: #909399;
            }
          }
        }

        .jianjie {
          height: 60px;
          background-color: #f8f9fa;
          border-radius: 20%;
          transition: all 0.3s ease;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
          }
        }
      }

      .g-price span {
        transition: transform 0.3s ease;
        display: inline-block;

        &:hover {
          transform: scale(1.1);
          color: #f56c6c;
        }
      }

      .btn {
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
        }
      }
    }
  }

  @media (max-width: 980px) {
    .goods-info {
      .media {
        padding: 0;

        img {
          width: 200px;
          height: 200px;
        }
      }

      .spec {
        padding: 0;
      }
    }
  }

  @media (max-width: 350px) {
    .goods-info {
      .media {
        padding: 0;

        img {
          width: 180px;
          height: 180px;
        }
      }

      .spec {
        padding: 0;
      }
    }
  }
}
</style>
